<%--
  User: Shengzhao Li
  Date: 13-9-8
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>Backlog</title>
    <script src="${contextPath}/js/web/ckeditor/ckeditor.js"></script>
</head>
<body>
<div class="row">
    <hr/>
    <div class="span12">
        <div class="alert alert-success hide">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <div><i class="icon-ok-sign icon-white"></i>
                <%--<span id="successful" class="hide">Add/Edit the sprint successful!</span>--%>
            </div>
        </div>
        <div class="alert alert-info hide">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <div><i class="icon-info-sign icon-white"></i>
                <span id="successAddNext" class="hide">Save the backlog finished, please add new one.</span>
            </div>
        </div>
        <div class="alert alert-error hide">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <div><i class="icon-warning-sign icon-white"></i>
                <%--<span id="alertErrorInfo"></span>--%>
            </div>
        </div>
    </div>
</div>
<form:form commandName="backlogFormDto" id="backlogForm">
    <form:hidden path="guid"/>
    <div class="row backlog-form">
        <div class="span8 well">
            <fieldset>
                <legend>Backlog</legend>
                <table class="width100">
                    <tr>
                        <td>
                            <label>Type</label>
                            <c:forEach items="${backlogFormDto.availableTypes}" var="p">
                                <label class="radio inline">
                                    <form:radiobutton path="type" value="${p.value}"/> ${p.label}
                                </label>
                            </c:forEach>
                            <form:errors path="type" cssClass="label label-warning"/>
                            <span class="help-block">&nbsp;</span>
                        </td>
                        <td>
                            <label>Priority</label>
                            <c:forEach items="${backlogFormDto.availablePriorities}" var="p">
                                <label class="radio inline">
                                    <form:radiobutton path="priority" value="${p.value}"/> ${p.label}
                                </label>
                            </c:forEach>
                            <form:errors path="priority" cssClass="label label-warning"/>
                            <span class="help-block">&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="estimateTime">Estimate time(hour)</label>
                            <input type="number" name="estimateTime" id="estimateTime"
                                   placeholder="Estimate of the backlog"
                                   required="true" value="${backlogFormDto.estimateTime}"/>
                            <form:errors path="estimateTime" cssClass="label label-warning"/>
                            <span class="help-block">Suggest the estimate do not more than 16 hours</span>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <label for="content">Content <form:errors path="content"
                                                                      cssClass="label label-warning"/></label>
                            <form:textarea path="content" cssClass="ckeditor" id="content"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div class="span3 well">
            <fieldset>
                <legend>Documents</legend>
            </fieldset>
            <p>
                ...
            </p>
        </div>
    </div>
    <div class="row">
        <div class="span5 offset2">
            <form:hidden path="addNext" id="addNext"/>
            <button type="submit" class="btn btn-success btn-large" addNext="false"><i class="icon-plus icon-white"></i>
                Save
            </button>
            <button type="submit" class="btn btn-info btn-large" addNext="true"><i class="icon-plus icon-white"></i>
                Save & Add next
            </button>
            <a href="../backlog_overview" class="btn btn-link">Cancel</a>
        </div>
    </div>
</form:form>
<script type="text/javascript">
    $(function () {
        new BacklogForm('${param.alert}');
    });
</script>
</body>
</html>